<template>
  <DrawerDetail v-model="dialogVisible" 
  :activeName="activeName"
  :title="title" :tabs="ruleForm.tabs">
    <template #detailSynopsis>
      <span class="gray">创建时间 </span
      ><span class="mx15">2021-11-10 15:49</span>
      <span class="gray">最近更新时间 </span
      ><span class="mx15">2021-11-10 15:49</span>
    </template>
    <template #operationBotton>
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
      <el-button>中文</el-button>
    </template>
    <template #operationContent="{ data }">
       <component 
       :is="getTabRender(data)" :data="baseinfo"></component>
    </template>
  </DrawerDetail>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, onMounted, watch, shallowRef, nextTick, defineAsyncComponent } from "vue";
import DrawerDetail from "/@/components/drawer/drawer.vue";
import  {
  Detail,
  module ,insertAndEdit,fieldList,deleteVue,
  query,list,
  dataInfo
} from './index';
import { componentInstall, loadAsyncComponent } from "/@ts/plugins/components";
import { generateFakeData } from "../mock";
const emit = defineEmits(["update:modelValue"]);
const dialogVisible = shallowRef(false);
let props: any = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
      default: '详情页'
  },
  tabs: {
    type: Object,
    default: [],
  },
});
watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val;
  },
  {
    immediate: true,
  }
);

watch(
  () => dialogVisible.value,
  (val) => {
    if (!val) {
      handleClose();
    }
  }
);
const handleClose = () => {
  emit("update:modelValue", false);
};
const baseinfo = ref(generateFakeData(1)[0]);

const ruleForm = reactive({
  tabs: [
    {
      label: "基本信息",
      name: module+"Detail",
      render: Detail
    },
    {
      label: "字段列表",
      name: "fieldList",
      render: fieldList
    },
     {
      label: "查询条件",
      name: "query",
      render: query
    },
    {
      label: "增加/修改",
      name: "insertAndEdit",
      render: insertAndEdit
    },
     
     {
      label: "详情信息",
      name: "dataInfo",
      render: dataInfo
    },
    {
      label: "列表",
      name: "list",
      render: list
    },
    {
      label: "删除",
      name: "deleteVue",
      render: deleteVue
    },
    
     
  
  ],
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
const getTabRender = (name) => {
  return ruleForm.tabs.find((item) => item.name === name).render;
}
const activeName = ref(module+"Detail");
const state = reactive({});
onMounted( () => {
 componentInstall('detail',module,Detail)
})
</script>

<style scoped lang="scss"></style>
